<template>
  <div class="h-100">
    <!-- 路由列表 -->
    <link-segment-list ref="routeList" page-name="linkSegment" @operate="operate" />
    <!-- 路由详情弹窗 -->
    <detail :visible="detailShow" :row-data="rowData" @close="detailShow = false" />
    <!-- 网段详情弹窗 -->
    <segment-detail :row-data="rowData" :visible="showSegment" @close="showSegment = false" />
    <!-- 修改路由名称弹窗 -->
    <el-dialog
      v-el-drag-dialog="{updataFull, updataDialogWidth}"
      :fullscreen="isfullscreen"
      :width="setDialogWidth('500px')"
      :visible="showNameEdit"
      :title="$t('MOD_LINK_SEGMENT_NAME')"
      @close="showNameEdit = false"
    >
      <el-form ref="nameForm" :model="formData" label-width="auto" :rules="rules">
        <el-form-item :label="$t('LINK_SEGMENT_NAME')" prop="segmentName" class="w-100">
          <el-input v-model.trim="formData.segmentName" maxlength="100" />
        </el-form-item>
      </el-form>
      <template v-slot:footer>
        <el-button @click="showNameEdit = false">{{ $t('CANCEL') }}</el-button>
        <el-button type="primary" @click="$debounce(saveName)">{{ $t('SAVE') }}</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
  import Detail from './components/Detail'
  import SegmentDetail from './components/SegmentDetail'
  import logicSegmentApi from '@/api/oen/LogicSegmentApi'
  import LinkSegmentList from '@/components/LinkSegmentList'

  export default {
    name: 'ConfRoutePage',
    components: {
      LinkSegmentList,
      Detail,
      SegmentDetail
    },
    data() {
      return {
        showSegment: false,
        detailShow: false,
        formData: {
          segmentName: ''
        },
        showNameEdit: false,
        rowData: {},
        operateType: 'add'
      }
    },
    computed: {
      rules() {
        return {
          segmentName: [
            {
              required: true,
              message: this.$t('PLEASE_INPUT') + this.$t('LINK_SEGMENT_NAME'),
              trigger: 'blur'
            }
          ]
        }
      }
    },
    activated() {
      this.$refs.routeList && this.$refs.routeList.doLayout()
    },
    methods: {
      loadData() {
        this.$refs.routeList && this.$refs.routeList.loadData()
      },
      operate(data) {
        switch (data.type) {
        case 'editName':
          // 弹出编辑名字
          this.formData = data.data
          this.formData.oldName = this.formData.segmentName
          this.showNameEdit = true
          this.$nextTick(() => {
            this.$refs.nameForm && this.$refs.nameForm.clearValidate()
          })
          break
        case 'view':
          // 查看路由详情
          this.rowData = data.data
          this.detailShow = true
          break
        case 'mod':
          // 修改
          this.rowData = data.data
          this.showSegment = true
          break
        default:
          break
        }
      },
      // 保存名称
      saveName() {
        console.log('this.formData', this.formData)
        if (this.formData.oldName === this.formData.segmentName) {
          this.showNameEdit = false
          return
        }
        this.$refs.nameForm.validate((valid) => {
          if (valid) {
            logicSegmentApi
              .updateName({
                segmentId: this.formData.segmentId,
                segmentName: this.formData.segmentName,
                oldName: this.formData.oldName
              })
              .then(res => {
                if (res) {
                  this.$message.success(this.$t('MODIFY_SUCCESS'))
                  this.closeEdit(true)
                } else {
                  this.$message.error(this.$t('MODIFYFAILED'))
                }
              })
          }
        })
      },
      // 弹窗关闭
      closeEdit(load) {
        this.showSegment = false
        this.showNameEdit = false
        if (load === true) {
          this.loadData()
        }
      }
    }
  }
</script>

<style></style>
